<template>
  <el-container>
    <el-header>
      <span>共{{ total }}条字段</span>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :data="list.slice((query.page - 1) * query.page_size, query.page * query.page_size)"
        row-key="field_name" stripe style="height: 480px;">
        <el-table-column label="序号" type="index" width="100">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column label="字段名" prop="field_name" width="250"></el-table-column>
        <el-table-column label="字段名称" prop="field_description" width="350"></el-table-column>
        <el-table-column label="数据类型" prop="field_type" width="250"></el-table-column>
        <el-table-column label="完整度" width="250">
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="100">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="table_show(scope.row)">详情</el-button>
              <!-- <el-button text type="primary" size="small">编辑</el-button> -->
              <!-- <el-button text type="primary" size="small">删除</el-button> -->
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <el-pagination background layout="prev, pager, next ,total,sizes" :total="total" :current-page="query.page"
      :page-size="query.page_size" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </el-container>
  <el-drawer v-model="dialog.info" :size="800" title="详细" direction="rtl" destroy-on-close>
    <info ref="infoDialog"></info>
  </el-drawer>
</template>

<script>
import * as index from './../../../api/model/table'
import info from '../view/info'
export default {
  name: 'listTree',
  components: {
    info
  },
  props: ['this.total'],
  data() {
    return {
      query: {
        page: 1,
        page_size: 10
      },
      dialog: {
        info: false
      },
      groupFilterText: "",
      list: [],
      search: {
        keyword: ""
      },
      value1: true,
      total: 0,
      tablename: ''
    }
  },
  watch: {
    list() {
      //总数
      this.total = this.list.length;
    }
  },
  mounted() {
    //监听点击tree事件
    this.$Bus.on("treecheck", (data) => {
      this.tablename = data;
      this.table()
    });
  },
  created() {
    this.table();
  },
  methods: {
    //列表数据（表里所有字段）
    table() {
      index.tableColumnInfo({ tableName: this.tablename }).then((response) => {
        this.list = response.data.data;
        this.total = this.list.length
      }).catch(function (error) {
        console.log(error)
      })
    },
    //获取表格序号
    getIndex(index) {
      return (this.query.page - 1) * this.query.page_size + index + 1
    },
    //分页
    handleSizeChange(val) {
      this.query.page = 1
      this.query.page_size = val
    },
    //分页
    handleCurrentChange(val) {
      this.query.page = val
    },
    //详情
    table_show(row) {
      this.dialog.info = true
      this.$nextTick(() => {
        this.$refs.infoDialog.setData(row)
      })
    },
  },
  //移除频道
  beforeUnmount() {
    this.$Bus.off('treecheck')
  },
}
</script>

<style>
.nopadding {
  margin-top: -50px;
  height: 100%;
}
</style>
